import React from 'react'
import './App.css'

class Square extends React.Component {
  render () {
    return (
      <button className={ this.props.value === '白棋' ? 'square1' : this.props.value === '黑棋'? 'square2' : ''} onClick={this.props.onClick}>
        {/* {this.props.value} */}
      </button>
    )
  }
}

class Jing extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      len: 15,
      squares: [],
      isX: true,
      isOver: false
    }
  }
  gameOver = (row, col) => {
    const squares = this.state.squares
    const result = squares[row][col]
    let l = 0, r = 0, t = 0, b = 0, lt = 0, rt = 0, lb = 0, rb = 0
    let i, j
    i = row
    j = col
    while ( i >= 0 && squares[i][j] === result) {
      i--
      l++
    }
    i = row
    j = col
    while ( i < this.state.len && squares[i][j] === result) {
      i++
      r++
    }
    i = row
    j = col
    while ( j >= 0 && squares[i][j] === result) {
      j--
      t++
    }
    i = row
    j = col
    while ( j < this.state.len && squares[i][j] === result) {
      j++
      b++
    }
    i = row
    j = col
    while ( i >= 0 && j >= 0 && squares[i][j] === result) {
      i--
      j--
      lt++
    }
    i = row
    j = col
    while ( i < this.state.len && j < this.state.len && squares[i][j] === result) {
      i++
      j++
      rb++
    }
    i = row
    j = col
    while ( i < this.state.len && j >= 0 && squares[i][j] === result) {
      i++
      j--
      rt++
    }
    i = row
    j = col
    while ( i >= 0 && j < this.state.len && squares[i][j] === result) {
      i--
      j++
      lb++
    }
    if (l + r === 6 || t + b === 6 || lt + rb === 6 || rt + lb === 6) {
      this.setState({
        isOver: true
      })
    }
  }
  handleClick = (row, col, e) => {
    console.log(this.state.squares)
    const squares = this.state.squares
    if (this.state.isOver)
        return
    if (squares[row][col])
      return
    squares[row][col] = this.state.isX ? '白棋' : '黑棋'
    this.setState({
      squares: squares,
      isX: !this.state.isX
    })
    this.gameOver(row, col)
  }
  render () {
    const squares = this.state.squares
    return (
      <div>
        {this.state.isOver
          ? <div className="text">{this.state.isX ? '黑棋' : '白棋'}获胜!</div>
          : <div className="text">下一步落子为 : {this.state.isX ? '白棋' : '黑棋'}</div>
        }
        {
          squares.map((item1, i) => {
            return (
              <div className="board-row" style={{ width: this.state.len * 40 + 'px' }} key={'' + i}>
                {
                  item1.map((item2, j) => {
                    return <Square key={''+ i + j} value={item2} onClick={(e) => this.handleClick(i, j, e)}></Square>
                  })
                }
              </div>
            )
          })
        }
      </div>
    )
  }
  componentDidMount () {
    this.setState({
      squares: Array(this.state.len).fill([]).map((item, index) => item[index] = Array(this.state.len).fill(null))
    })
  }
}

class App extends React.Component {
  render () {
    return (
      <Jing></Jing>
    )
  }
}

export default App
